<template>
  <link rel="stylesheet" href="/assets/css/indent-details.css" />
  <!-- 导航栏 -->
  <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="back" fixed z-index="100" />

  <div class="near-box">
    <div class="jd-qrdd-bigbox">
      <!-- --商品地址管理部分-- -->
      <div class="indent-details-box">
        <span class="indent-details-img1"></span>
        <span class="indent-details-text1">{{info.order.status_text}}</span>
        <span v-if="info.order.expid" class="indent-details-text2">
          快递公司：{{info.order.express.name}}<br />
          快递单号：{{info.order.expcode}}
        </span>
        <span v-else class="indext-details-text2">
          暂无物流信息
        </span>

      </div>

      <!--地址部分-->
      <div class="jd-qrdd-a1" v-if="info.address">
        <span class="qrdd-a1-t1">{{info.address.consignee}}</span>
        <span class="qrdd-a1-t1">{{info.address.mobile}}</span>
        <span class="qrdd-a1-t2" v-if="info.address.status == '1'">默认</span>
        <div class="qrdd-a1-b1">
          <span class="qrdd-a1-img1"></span>
          <span class="qrdd-a1-t3">{{info.address.region_text}} {{info.address.address}}</span>
        </div>
        <span class="qrdd-a1-img2"></span>
      </div>

      <!--商品部分-->
      <div class="zjzz-buylist-goods1" v-if="info.product.length > 0">
        <div class="zjzz-buylist-gtime">
          <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i></span>
          <span class="zjzz-buylist-gtime2" @click="Call">联系客服</span>
        </div>

        <router-link :to="{path:'/product/product/info', query: {proid: product.proid}}" class="zjzz-buylist-det"
          v-for="product in info.product">
          <img :src="product.info.cover_cdn" />
          <div class="zjzz-buylist-gdetail">
            <span class="zjzz-buylist-gtit1">{{product.info.name}}</span>
            <span class="zjzz-buylist-gmoney">
              <i class="zjzz-buylist-gm1">￥{{product.total}}</i>
              <i class="zjzz-buylist-gm2">x{{product.nums}}</i>
            </span>
          </div>
        </router-link>


        <div class="zjzz-buylist-btn">
          <a href="javascript:void(0)" class="zjzz-buylist-btn3" @click="Call">申请售后</a>
        </div>
      </div>

      <!--商品金额部分-->
      <div class="indent-details-box2">
        <span class="indent-details-text4">订单总额</span>
        <span class="indent-details-text5">￥{{info.order.total}}</span>
      </div>
      <div class="indent-details-box2">
        <span class="indent-details-text4 tcolor-grey">订单编号</span>
        <span class="indent-details-text5 tcolor-black">{{info.order.code}}</span>
      </div>
      <div class="indent-details-box2">
        <span class="indent-details-text4 tcolor-grey">下单时间</span>
        <span class="indent-details-text5 tcolor-black">{{info.order.createtime}}</span>
      </div>
      <div class="indent-details-box2">
        <span class="indent-details-text4 tcolor-grey">订单备注</span>
        <span class="indent-details-text5 tcolor-black">{{info.order.content}}</span>
      </div>
    </div>
  </div>


</template>

<script>

  export default {
    name: 'OrderInfo',
    created() {
      this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0;
      this.OrderData();
    },
    data() {
      return {
        orderid: 0,
        LoginUser: this.$cookies.get('LoginUser'),
        info: {
          // 物流信息
          order: {
            express: {},
          },
          // 用户信息
          address: {},
          // 商品信息
          product: [],
          // 客服号码
          contact: ''
        },
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },

      // 联系客服
      Call(){
        this.$dialog.confirm({
          title: "拨打电话",
          message: "是否确认拨打官方客服热线"
        }).then(()=>{
          location.href =`tel:${this.info.contact}`
        }).catch(()=>{})
      },

      async OrderData() {
        // 组装数据
        var data = {
          userid: this.LoginUser.id,
          orderid: this.orderid,
        }

        var result = await this.$api.OrderInfo(data)


        if (result.code == 0) {
          //提醒信息
          this.$notify({
            type: 'error',
            message: result.msg,
            duration: 1000,
            onClose: () => {
              //返回上一个界面
              this.$router.go(-1)
            }
          })
          return false
        }

        this.info = result.data
        console.log(result.data);
      }
    }
  }
</script>

<style>
  .near-box {
    margin-top: 4em;
  }

  .jd-qrdd-bigbox {
    padding-bottom: 1em;
  }
</style>